<template>
  <div class="upload-container">
    <template v-for="(item, index) in uploadTitle" :key="index" class="main">
      <div>
        <div class="border-box">
          <div class="border-left"></div>
          <div class="border-content">{{ item }}</div>
          <div class="border-right"></div>
        </div>
        <div class="upload-box">
          <div style="width: 99.5%; overflow: overlay">
            <template v-for="(item, index) in fjxxInfoListsf" :key="index">
              <div style="padding: 8px; box-sizing: border-box" class="uploadbox">
                <div v-if="item && item.sfyx != 0" style="display: flex" class="fileListbox">
                  <div style="width: 80%; color: #fff">
                    {{ item.fjmc }}
                  </div>
                  <div style="flex: 1; display: flex; justify-content: right; padding-right: 20px">
                    <div v-if="item.fjmc" class="uploadIcon-success"></div>
                    <div
                      v-if="item.fjmc"
                      class="uploadIcon-delete"
                      @click="deleteFile(index)"
                    ></div>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <div class="upload-button" style="cursor: pointer" @click="uploaClick">
            上&nbsp;&nbsp;传
          </div>
        </div>
      </div>
    </template>
    <div v-if="isupload" class="fire-containers">
      <div class="fire-mains">
        <div class="mt-4">
          <template v-for="(item, index) in dialogfjxxInfoList" :key="index">
            <el-row>
              <el-col :span="8">
                <el-select v-model="item.fjlx" class="m-2">
                  <el-option
                    v-for="item in options"
                    :key="item.zddm"
                    :label="item.zdmc"
                    :value="item.zddm"
                  />
                </el-select>
              </el-col>
              <el-col :span="16">
                <el-input v-model="item.fjmc" class="uploadbox">
                  <template #append>
                    <el-upload
                      :before-upload="beforeUpload"
                      :http-request="handleRequest"
                      multiple
                      headers="Content-Type: multipart/form-data"
                      :action="url"
                      :auto-upload="true"
                    >
                      <div style="cursor: pointer" @click="fileClick(index)">选择附件</div>
                    </el-upload>
                  </template>
                </el-input>
              </el-col>
            </el-row>
          </template>
          <div class="xzbox" @click="addUpload">
            <el-icon style="font-size: 16px">
              <Plus />
            </el-icon>
            <span>新增附件</span>
          </div>
        </div>
      </div>
      <div style="text-align: center; margin-top: 25px">
        <el-button type="info" style="border-radius: 10px" @click="cancelClick">取消</el-button>
        <el-button type="success" style="background: #02979b; border-radius: 10px" @click="submit"
          >确定
        </el-button>
      </div>
    </div>
  </div>

  <FileUploadTipConfirm :progress-percent="progressPercent" />
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { defineProps } from 'vue'
import { ElMessage } from 'element-plus'
import { useChemicalStore } from '@/store'
import { chemical_server } from '@/service'
import { queryZdZdmcInfo } from '@/service/api'
import axios from 'axios'
import FileUploadTipConfirm from '@/components/FileUploadTipConfirm/index.vue'
// const uploadTitle = ['平面图', '工艺图', '四色风险图', '消防系统图', '企业文档', '历史事故案例']
const isupload = ref(false)
const chemicalStore = useChemicalStore()
const fjxxInfoListsf = ref([
  {
    fjlx: '',
    fjmc: '',
    fjdz: '',
    sfyx: 1,
    qyid: chemicalStore.qyInfo.id,
  },
])
const dialogfjxxInfoList = ref([
  {
    fjlx: '',
    fjmc: '',
    fjdz: '',
    sfyx: 1,
    qyid: chemicalStore.qyInfo.id,
  },
])
const fjxxInfoList = ref([
  {
    fjlx: '',
    fjmc: '',
    fjdz: '',
    sfyx: 1,
    qyid: chemicalStore.qyInfo.id,
  },
])
const fjxxInfoListsfCopy = ref([
  {
    fjlx: '',
    fjmc: '',
    fjdz: '',
    sfyx: 1,
    qyid: chemicalStore.qyInfo.id,
  },
])
interface ResultType {
  result: {
    resultCode: string
    resultMessage: string
  }
  data: object
}
/** 适配接口返回结果 */
function adapter(response: ResultType) {
  if (response.result.resultCode == '000000') {
    return response.data
  }
  throw new Error()
}
const fielIndex = ref()
// const url = 'http://192.168.40.186:9052/upload/path' // 本地
// const url = 'https://njxfxcx.nj119.com.cn:8081/gw/file-service-unencrypted/upload/path' //上线打开
const url = window.app.config.globalProperties.$config.fileUploadUrl
const options = ref([])
const props = defineProps({
  uploadTitle: {
    type: Array,
    default: [],
  },
  fjlxType: {
    type: Number,
    default: null,
  },
})

const emit = defineEmits(['uploadSuccess', 'uploadDelete'])
//附件类型
function queryxk() {
  queryZdZdmcInfo({ key: 'fjlx', bz: props.fjlxType }).then((res: any) => {
    options.value = res
  })
}
function fileClick(index: any) {
  fielIndex.value = index
}
const beforeUpload = (file: any) => {}

/** 附件上传到文件服务 */
const progressPercent = ref(0) //上传进度条
function handleRequest(data: any) {
  chemicalStore.fileUploadTipShow = true //打开上传文件进度 提示弹窗

  const formdata = new FormData()
  formdata.append('multipartFile', data.file)
  formdata.append('path', '/chemical-collect-service/fj/')

  const config = {
    onUploadProgress: (progressEvent: any) => {
      // progressEvent.loaded:已上传文件大小
      // progressEvent.total:被上传文件的总大小
      progressPercent.value = Number(
        ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2)
      )
    },
  }
  axios
    .post(url, formdata, config)
    .then((res: any) => {
      dialogfjxxInfoList.value[fielIndex.value].fjdz = res.data.data.fileSaveName
      dialogfjxxInfoList.value[fielIndex.value].fjmc = data.file.name

      chemicalStore.fileUploadTipShow = false //关闭上传文件进度 提示弹窗
      ElMessage.success('附件上传成功')
    })
    .catch(() => {
      ElMessage.error('附件上传失败')
      chemicalStore.fileUploadTipShow = false //关闭上传文件进度 提示弹窗
    })
}

function uploaClick() {
  dialogfjxxInfoList.value = [
    {
      fjlx: '',
      fjmc: '',
      fjdz: '',
      sfyx: 1,
      qyid: chemicalStore.qyInfo.id,
    },
  ]

  //罐区附件类型默认选中平面图
  if (props.fjlxType === 1) {
    dialogfjxxInfoList.value[0].fjlx = '1'
  }

  isupload.value = true
}
function addUpload() {
  const options = {
    fjlx: '',
    fjmc: '',
    fjdz: '',
    sfyx: 1,
    qyid: chemicalStore.qyInfo.id,
  }

  //罐区附件类型默认选中平面图
  if (props.fjlxType === 1) {
    options.fjlx = '1'
  }

  dialogfjxxInfoList.value.push(options)
}
function cancelClick() {
  isupload.value = false
}

function deleteFile(index: any) {
  fjxxInfoListsf.value[index].sfyx = 0
  emit('uploadDelete', fjxxInfoListsf.value)
}
function submit() {
  let isflg = false
  dialogfjxxInfoList.value.map((item) => {
    if (!item.fjlx) {
      ElMessage({
        message: `请选择附件类型`,
        type: 'warning',
        customClass: 'messClass',
      })
      return (isflg = true)
    }
  })
  if (!isflg) {
    progressPercent.value = 0 //进度条重置为0
    fjxxInfoListsf.value = dialogfjxxInfoList.value.concat(fjxxInfoListsf.value)
    fjxxInfoListsfCopy.value = JSON.parse(JSON.stringify(fjxxInfoListsf.value))

    if (
      props.uploadTitle[0] == '消防控制室附件' ||
      props.uploadTitle[0] == '企业专职队附件' ||
      props.uploadTitle[0] == 'DCS控制室附件' ||
      props.uploadTitle[0] == '堆场附件' ||
      props.uploadTitle[0] == '仓库附件' ||
      props.uploadTitle[0] == '火炬设施附件' ||
      props.uploadTitle[0] == '罐区附件' ||
      props.uploadTitle[0] == '装置附件'
    ) {
    } else {
      fjxxInfoListsfCopy.value.splice(fjxxInfoListsfCopy.value.length - 1, 1)
    }

    emit('uploadSuccess', fjxxInfoListsfCopy)
    isupload.value = false
  }
}
defineExpose({ fjxxInfoListsf })

onMounted(() => {
  queryxk()
})
</script>

<style lang="less" scoped>
.fileListbox:hover {
  background: rgba(255, 255, 255, 0.2);
}
.fire-containers /deep/ .el-select .el-input__wrapper {
  width: 140px !important;
}

/deep/ .el-input {
  --el-input-focus-border-color: unset;
  --el-input-focus-border: unset;
  height: 34px;
}

/deep/ .el-input-group__append {
  border-left: 0;
  border-top-left-radius: 0;
  background: #02979b;
  border: 0px !important;
  /* line-height: 31px; */
  color: #fff;
  box-sizing: border-box;
}

/deep/ .el-input-group__append {
  border-left: 0;
  border-top-left-radius: 0;
  background: #02979b;
  border: 1px solid #6d6d6d;
  color: #fff;
}

/deep/ .el-icon svg {
  height: 0.7em;
  font-size: 18px;
  width: 1em;
  /* margin: 7px 0; */
}

/deep/ .el-upload-list {
  /* margin: 10px 0 0; */
  padding: 0;
  /* list-style: none; */
  /* position: relative; */
  display: none;
}

/deep/ .el-upload:focus {
  border-color: var(--el-color-primary);
  color: #fff;
}

.xzbox {
  height: 36px;
  margin-top: 10px;
  background: rgba(109, 109, 109, 0.2);
  border: 1px dotted #6d6d6d;
  border-radius: 4px;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
}
.uploadbox:hover .uploadIcon-success {
  display: none;
}
.uploadbox:hover .uploadIcon-delete {
  display: block;
}
.uploadIcon-success {
  width: 18px;
  height: 18px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(@/assets/image/common/correct-icon.png);
}
.uploadIcon-delete {
  width: 18px;
  height: 18px;
  display: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(@/assets/image/common/upload-delete.png);
}
.upload-container {
  position: relative;

  .fire-containers {
    width: 554px;
    background: #010711;
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid #797979;
    position: absolute;
    top: -155%;
    right: 50%;
    padding: 20px;

    box-sizing: border-box;
    border: 8px solid rgba(255, 255, 255, 0.2);
    transform: translate(50%, 0);

    // background-color: hotpink;
    .fire-mains {
      max-height: 300px;
      overflow: auto;
    }
  }

  /deep/ .el-row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
    margin-top: 10px;
  }

  .m-2 {
    margin: 0;
  }

  .uploadbox {
  }

  .border-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 10px;

    .border-left,
    .border-right {
      width: 38%;
      height: 3px;
      background-color: #666;
    }

    .border-content {
      width: 100px;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .upload-demo {
    width: 99.5%;
    height: 120px;
  }

  .upload-box {
    display: flex;
    position: relative;
    width: 99.5%;
    height: 120px;
    border: 1px solid rgba(109, 109, 109, 1);
    border-top: 1px solid transparent;
    margin-bottom: 5px;
  }

  .upload-button {
    height: 100px;
    padding: 10px;
    border-radius: unset;
    width: 70px;
    border: unset;
    background-color: #02979b;
    font-size: 16px;
    text-align: center;
    line-height: 172px;
    margin-bottom: 10px;
    background-image: url(/src/assets/image/common/upload-icon.png);
    // background-size: 63% 60%;
    color: #fff;
    background-position: center 12px;
    background-repeat: no-repeat;
  }

  .el-upload-list {
    overflow: auto;
    height: 97px;
    width: 90%;
    margin-top: 13px;

    .el-upload-list__item {
      margin-bottom: 12px;
      width: 99%;

      .el-upload-list__item-name {
        height: 25px;

        .el-upload-list__item-file-name {
          color: rgba(255, 255, 255, 0.8);
          font-size: 16px;
        }
      }

      .el-icon--close {
        background-color: red;
        border-radius: 50%;
      }

      &:hover {
        background-color: rgba(2, 151, 155, 0.4);
      }
    }
  }
}
</style>
